<template>
  <div class="flexcolumn">
    <div class="headerbox flexbetween">
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link flexcenter commhover c_555666">
          <svg-icon :icon-class="typeItem.icon" class-name="mr-5 f-14" />
          <span class="f-12 textover">{{ typeItem.name }}</span
          ><i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" class="p-8">
          <el-dropdown-item
            v-for="(item, index) in typeList"
            :key="index"
            :command="item.id"
          >
            <div class="flexcenter">
              <svg-icon :icon-class="item.icon" class-name="mr-5 f-14" />
              {{ item.name }}
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-tooltip
        class="item"
        effect="dark"
        :content="typeItem.info"
        placement="top-start"
      >
        <div class="f-12 extra c_888999">{{ typeItem.info }}</div>
      </el-tooltip>
      <div class="flex">
        <el-tooltip effect="dark" content="通讯录" placement="top-start">
          <div class="anticon p-4 ml-5 f-16 c_888999 commhover flexcenter" @click="handleOpenAddress">
            <svg-icon icon-class="k_user" />
          </div>
        </el-tooltip>
        <el-tooltip effect="dark" content="搜索" placement="top-start">
          <div class="anticon p-4 ml-5 f-14 c_888999 commhover flexcenter" @click="handleOpenSearch">
            <svg-icon icon-class="k_search" />
          </div>
        </el-tooltip>
        <el-tooltip effect="dark" content="回到顶部" placement="top-start">
          <div class="anticon p-4 ml-5 f-14 c_888999 commhover flexcenter">
            <svg-icon icon-class="k_top" />
          </div>
        </el-tooltip>
        <!-- <el-button plain type="mini" class="p-5" @click="handleOpenGroup"
          >建群</el-button
        >
        <el-button plain type="mini" class="p-5 ml-5" @click="handleOpenAddress"
          >通讯录</el-button
        > -->
        
      </div>
    </div>
    <div class="headerbox" v-if="isSearch">
      <el-input
        v-model="queryParams.keyword"
        size="small"
        class="f-12"
        :placeholder="placeholdertext"
        suffix-icon="el-icon-search"
      ></el-input>
    </div>
    <!-- 消息排序 -->
    <message-sort
      v-if="opensort"
      :visable="opensort"
      @close="handleCloseSort"
    />
    <!-- 建群 -->
    <create-group
      v-if="opengroup"
      :visable="opengroup"
      @close="handleCloseGroup"
    />
    <!-- 通讯录 -->
    <address-list
      v-if="openaddress"
      :visable="openaddress"
      @close="handleCloseAddress"
    />
  </div>
</template>

<script>
import MessageSort from "./MessageSort.vue";
import CreateGroup from "./CreateGroup.vue";
import AddressList from "./AddressList.vue";
export default {
  data() {
    return {
      typeItem: {},
      typeList: [
        { id: 1, name: "上班", icon: "sonline", info: "客户分配中" },
        {
          id: 2,
          name: "离开",
          icon: "leave",
          info: "不再主动给你分配客户，但其他客服可以给你转接",
        },
        {
          id: 3,
          name: "下班",
          icon: "offline",
          info: "不再给你分配客户，其他客服也不能给你转接",
        },
      ],
      queryParams: {
        type: "全部消息",
        keyword: "",
      },
      isSearch:false,
      placeholdertext: "输入好友昵称/备注/姓名或群名称",
      opensort: false,
      opengroup: false,
      openaddress: false,
    };
  },
  components: {
    MessageSort,
    CreateGroup,
    AddressList,
  },
  created() {
    this.handleCommand(1);
  },
  methods: {
    handleCommand(command) {
      console.log(command);
      this.typeList.forEach((item) => {
        if (command == item.id) {
          this.typeItem = item;
        }
      });
      // if (command == "a") {
      //   this.opensort = true;
      // }
    },

    handleCloseSort() {
      this.opensort = false;
    },

    handleOpenSearch(){
      this.isSearch = !this.isSearch
    },

    handleOpenGroup() {
      this.opengroup = true;
    },

    handleCloseGroup() {
      this.opengroup = false;
    },

    handleOpenAddress() {
      this.openaddress = true;
    },

    handleCloseAddress() {
      this.openaddress = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.headerbox {
  height: 46px;
  padding: 7px 16px;
  border-bottom: 1px solid #e9e9e9;
}
.el-dropdown-link {
  line-height: 32px;
}
.extra {
  max-width: 100px;
  color: #888999;
  flex: 1 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.anticon {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  height: 24px;
  width: 24px;
}
.queryformclass {
  .el-form-item {
    margin-bottom: 0;
    margin-top: 8px;
  }
  ::v-deep .el-form-item__content {
    line-height: 28px;
  }
  ::v-deep .el-input__inner {
    border: 0;
    background-color: #f7f7f7;
  }
}
</style>